@import "variables";

/**
*	reset css
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
ul,ol{
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
input[type=text], select {
	-webkit-appearance: none;
	-moz-appearance: none;
	margin: 0;
	padding: 0;
	background: 0 0;
	border: none;
	font-size: 1em;
	text-indent: 3px;
}
body{
	min-width: @min_width;
	font:100%/1.125em tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	color:#000;
}
a{
	text-decoration:none;
	color:gray;
}
h2{
	font-size:1.125em;
}
.fl{
	float:left;
}
.fr{
	float:right;
}
/* clearfix */
.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.body-white{
	background:white;
	line-height:0;
}
#client-app-banner{
	display:none;
	background:#383535;
	color:#FFF;
	line-height:0;
	position:relative;
	.app-close-btn{
		position: absolute;
		left: 0;
		top: 0;
		line-height: 64px;
		text-align: center;
		font-size: 28px;
		padding: 0 8px;
		color: #E5E5E5;
		font-family: serif;
	}
	.app-wrapper{
		width: 320px;
		margin: 0 auto;
		padding: @normal 0 @normal 40px;
		.app-icon{
			width:48px;
			vertical-align:top;
			margin-right:@normal;
		}
		.app-text{
			display: inline-block;
			line-height: 22px;
			vertical-align: top;
			margin-right:@normal;
			strong{
				display:block;
			}
			em{
				font-style:normal;
				font-size:@font_small;
				color:#CCC;
			}			
		}
		.app-go{
			display:inline-block;
			background: url(../images/bg/white_right_arrow.png) center right no-repeat;
			width:25px;
			height: 48px;
			vertical-align: top;
			background-size: 25px;
		}
	}
}
header{ 
	text-align:center;
	height:@header_height;
	line-height:@header_height;
	.h-left,.h-right{
		display:block;
		position:absolute;
		top:0;
		left:0;
		height:@header_height;
		padding:0 @medium;
	}
	.h-right{
		left:auto;
		right:0;
	}
}
.index-header{
	position:relative;
	background-color:#F95E26;
	line-height:24px;
	color:#FFF;
	text-align:left;
	height:auto;
	padding: @small 0;
	.h-left{
		position:static;
		height:auto;
		.user-home{
			position:relative;
			display:inline-block;
			background:url(../images/common/avatar_default.png) no-repeat;
			background-size:48px;		
			width:48px;
			height:48px;
			overflow: hidden;
			line-height: 20em;
			margin-right:@medium;
			vertical-align: middle;
			b.user-online{
				display: block;
				position: absolute;
				width: 7px;
				height: 7px;
				top: 25px;
				right: 5px;
				background-color: #8FDC00;
				border-color: #48C000;
				.border-radius(100%,100%,100%,100%);
			}
		}
		.h-slogan{
			display:inline-block;
			width:96px;
			font-size:@font_normal;
			vertical-align:middle;	
		}
	}
	.h-right{
		height:auto;
		top: @medium;
		.logo{
			display: block;
			background: url(../images/logo/logo.png) no-repeat;
			background-size: auto 80px;
			width: 278px;
			height: 80px;
			overflow: hidden;
			line-height: 20em;
		}
	}

}
.main{
	width:100%;
	max-width:@max_width;
	min-width:@min_width;
	margin:0 auto;
}
.box{
	display:block;
	margin:@medium;
}
.section-box{
	display:block;
	margin:@medium 0;
}
.container{
	margin:@medium;
	padding:@large @medium;
	width:auto;
	.border-radius(@small,@small,@small,@small);
}

.login-box{	
	padding:@medium;
	text-align:center;
	h1{
		text-align:center;
		font-size:@font_large;
		margin-bottom:@large;
	}
	.icon{
		background:#FF9E07 url(../images/bg/login_icons.png) no-repeat;
		background-size:42px;
		display: inline-block;
		width: 42px;
		height: 42px;
		font-size: 0;
		margin-right: @normal;
		max-height: 42px;
		.border-radius(8px,8px,8px,8px);
	}
	.icon-qq{
		background-position:0 -2px;
	}
	.icon-weibo{
		background-position: -1px -82px;
	}
	.icon-alipay{
		background-position:0 -42px;
	}
}
.bg-white{
	background-color:white;
}
.bg-red{
	background-color:@bg_red;
}
#sale-today{
	.p-image-box{
		display:block;
		position:relative;
		min-height: 320px;
		.tyg-waiting{
			display:inline-block;
			width:100%;
			text-align:center;
			padding:20px 0;
		}
		img{
			width:100%;
			min-height: 320px;
    		min-width: 320px;
		}
	}
	.p-title{
		font-size: @font_large;
		line-height:24px;
		color: #000;
		padding: @normal;
		.p-tip{
			color:#FF9508
		}
	}
	.sale-desc{
		color:#FFF;
		li{
			float:left;
			width:50%;
			background-color:@base_col2;
			height:36px;
			line-height:36px;
			overflow:hidden;
			.p-icon{
				background: #099D91;
				display: inline-block;
				padding: @small @normal;
				margin-right: @normal;
				width:48px;
				height:36px;
				vertical-align:top;		
			}
			label{
				display:inline-block;
			}
		}
		.p-salevolume .p-icon{
			background: url(../images/common/tag.png) 8px 4px no-repeat #099d91;
			background-size: 28px;
		}
		.p-store .p-icon{
			background:url(../images/common/store.png) 8px 4px no-repeat #099D91;
			background-size: 30px;
		}
	}
}

.p-action{
	color:#FF3201;
	font-size:@font_medium;
	padding: 1px 0;
	label{
		display:inline-block;
		vertical-align:top;
		text-align:right;
	}
	.p-price{
		color:#999;	
	}
	.left{
		float:left;
		width: 60%;
		overflow: hidden;
		.p-nowprice{
			display:block;			
			height: 46px;
			text-align:left;			
			font-family: arial;		
			strong{
				font-size: 36px;
				line-height: 46px;
				display: inline-block;
				margin-right:@normal;
				vertical-align:middle;					
			}
		}
		.p-tags{
			display:inline-block;
			font-family: arial,sans-serif;
			font-size: 12px;	
			vertical-align:middle;		
			.p-nochange,.p-discount{
				display:inline-block;				
				background: #FF8181;
				color: #FFF;
				line-height: 12px;
				vertical-align: middle;
				padding: 2px @small;
			}
			.p-discount{
				background: #9D9D9D;
			}
		}
		.p-additional{
			display:block;
			text-align:left;
			height:18px;			
			span{
				display:inline;
			}
		}
	}
	.p-additional{
		display:block;
		padding:0 8px;
		.p-price span{
			font-family:arial;
		}
	}
	.p-additional,.right{
		.p-discount{
			padding: 3px 5px;
			background: #9D9D9D;
			color: #FFF;
		}
	}
	.right{
		float:right;
		label{		
			color:#666;
			line-height:23px;
		}
		em{
			padding: 0 2px;
			background: #9D9D9D;
			color: #FFF;
			font-style:normal;
		}
		.btn-shopping-now{
			position: relative;
			background: #F95E26;
			display: inline-block;
			color: #FFF;
			font-size: 18px;
			height: 64px;
			line-height: 64px;
			width: 160px;
			text-align: center;
		}
		.btn-disable{
			background:#c0c0c0;
		}
		.btn-shopping-now:before{
			content:"";
			position:absolute;				
			border-width:8px;
			border-style:dashed dashed dashed solid;
			border-color:transparent transparent transparent #FFF;
			top:22px;
			left:0;
		}
	}

}
.shopping-action{
	padding:@normal @medium;
	color:#FFF;	
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	.left p{
		font-size:14px;
		line-height:22px;
		padding-left:@small;
	}
	.left .p-salevolume{
		strong{
			font-size:16px;
			color:yellow;
		}
	}
	.btn-shopping-now{
		background: yellow;
		display: inline-block;
		color: red;
		font-weight: bold;
		padding-left: 30px;
		padding-right: 30px;
	}
}
#sale-soon-list{
	margin-bottom:@medium;
	.sale-soon-item{
		position:relative;
		background-color:@base_col2;
		.title{
			background-color:rgb(36, 181, 186);
			position:absolute;
			top:0;
			left:0;
			bottom:0;
			color: #FFF;
			display: table-cell;
			height:100%;
			text-align: center;
			padding:8% @medium;
			z-index:99;
			sub{
				font-size:12px;
			}
		}
		.title:before{
			content:"";
			position:absolute;
			top:42%;
			right:-18px;
			border-width:9px;
			border-style:dashed dashed dashed solid;
			border-color:transparent transparent transparent rgb(36, 181, 186);			
		}
		.cont{
			display:block;
			line-height:0;
			background:#000;
			img{
				opacity:0.5;
				max-width:100%;
				max-height: 120px;
			}
		}
	}
}
#table-sale-soon{
	width:100%;
	overflow:hidden;
	table-layout: fixed;
	margin-bottom:@medium;
	a{
		color:#FFF;
	}
	td{
		border-bottom:1px solid #FFF;
	}
	td img{
		max-width:100%;
	}
	td:first-child{
		position:relative;
		background-color:rgb(36, 181, 186);
		width:88px;
		padding:0 @medium;
		text-align:center;
		vertical-align:middle;
		.arrow-right{
			position:absolute;
			right:-18px;
			border-width:9px;
			border-style:dashed dashed dashed solid;
			border-color:transparent transparent transparent rgb(36, 181, 186);
			z-index:99;
		}
	}
	td:last-child{
		border:none;
		background-color:rgba(0,0,0,.4);
		.cont{
			background:rgba(0,0,0,.4);
			display: block;
			line-height: 0;
		}
		img{
			opacity:0.4;
			max-width:100%;
			min-height: 60px;
		}
	}
	
}
.nav-fixed-bottom{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:99;
}
footer{
	margin-top:@large;	
	color: gray;
	font-size:@font_small;
	.footnav{
		padding:0 @large;
		.left{
			float:left;
		}
		.right{
			float:right;
		}
		.f-username{
			padding-right:@medium;
		}
		.f-logout{
			padding-left:@medium;
			border-left:1px solid #999;
		}
	}	
	.copyright{
		margin-top:@normal;
		padding:@normal 0;
		text-align:center;
		border-top:1px solid #CCC;
		a{
			margin:0 @normal;
			color:@base_col1;
		}
		.cert-logos img{
			height:24px;
			vertical-align: middle;
		}
	}
}
.main footer .footnav{
	padding:0 @medium;
}
/* icon */
.icon{
	display:inline-block;	
	line-height:20em;
	vertical-align:middle;
	margin:0 @normal;
	max-height:@icon_medium;
	overflow:hidden;
}
.icon-alipay{
	background:url(../images/logo/alipay_logo.png) no-repeat;
}
.icon-arrow-right{
	width:@medium;
	height:@medium;
	background:url(../images/common/user_icons.png) no-repeat;
	background-size:50px;
}
.icon-arrow-right{
	background-position: -8px -87px;
}
/* split line */
.verticl-split-line{
	background: #000;
	display: inline-block;
	height: 20px;
	width: 1px;
	margin: 0 @normal;
	vertical-align: middle;
}
/* btn */
.T-btn,T-button{
	background-color:@bg_grey;
	display:block;
	width:100%;
	padding:@medium 0;
	border:none;
	text-align:center;
	font-size:@font_medium;
	color:#222;
	.border-radius(@small,@small,@small,@small);
	.text-shadow(0,1px,0px,rgba(255,255,255,0.2))
}
.T-btn-small{
	display:inline-block;
	width:auto;
	font-size:@font_small;
	padding:@normal @medium;
	.border-radius(@mini,@mini,@mini,@mini);
}
.T-btn-red{
	background-color:@bg_red;
	color:#FFF;
}

.TYG-alert{
	display: none;
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	text-align: center;
	font-size:@font_normal;
	margin:0;
	z-index:1999;
	.border-radius(0,0,0,0);
	a{
		margin-left:@small;
		color: @base_col2;
	}
}
@media screen and (max-width:480px){
	#client-app-banner{
		.app-close-btn{
			line-height:56px;
		}
		.app-wrapper{
			padding: @small 0 @small 40px;
			.app-text{
				display: inline-block;
				line-height: 22px;
				vertical-align: top;
				margin-right:@normal;
				strong{
					display:block;
				}
				em{
					font-style:normal;
					font-size:@font_small;
					color:#CCC;
				}			
			}
		}
	}
	.login-box h1{
		font-size:@font_medium;
	}
	.index-header{
		font-size:@font_small;
		line-height:20px;
		.h-left{
			padding:0 @normal;
			.user-home{
				margin-right:@normal;
			}
			.h-slogan{
				width:76px;
			}
		}
		.h-right{
			top:19px;
			padding:0 @normal;
			.logo{
				width:166px;
				height:50px;
				background-size:auto 50px;
			}
		}
	}
	#table-sale-soon{ 
		font-size:@font_normal;
		td:last-child img {
			min-height: 60px;
			max-height: 80px;
		}
	}
	#sale-today{
		.p-title{
			font-size:@font_normal;
			line-height:20px;
		}
	}
	.p-action{
		font-size:@font_normal;
		.left{
			.p-nowprice{
				height:34px;
				strong{
					font-size:24px;
					line-height:34px;
					margin-right:@small;
				}
			}
			.p-additional{
				font-size:12px;
				line-height:16px;
				height:16px;
			}
		}
		.right{
			label{
				font-size:@font_small;
				line-height:20px;
				strong{
					font-weight:normal;
				}
				em{
					padding:0 @mini;
				}
			}
			.btn-shopping-now{
				width:120px;
				height:50px;
				line-height:50px;
			}
			.btn-shopping-now:before{
				top:16px;
			}
		}
		.p-additional{
			padding:0 @small;
		}

	}
	.shopping-action{
		.left p{

		}
	}
}